<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { getDepartmentList, getScreenMemberInfo } from '@/api/indexPage/indexPage.api'

// 组件
import memberList from './src/components/member.vue'

const currentPage = 1
const pageSize = 10

// 获取运营商列表
const departmentList = ref([])
const currntDepartment = ref('')
const getDepartmentListData = async () => {
  try {
    const { data } = await getDepartmentList()
    departmentList.value = data
    if (departmentList.value.length > 0) {
      currntDepartment.value = data[0].id
    }
  } catch (err) {
    console.log(err)
  }
}

// 获取屏幕会员信息
const screenMemberInfo = ref([])
const getScreenMemberInfoData = async () => {
  try {
    const { data } = await getScreenMemberInfo({
      departmentId: currntDepartment.value,
      pageNum: currentPage,
      pageSize: pageSize
    })
    screenMemberInfo.value = data?.records || []
  } catch (err) {
    console.log(err)
  }
}

// 大屏数据定时器 更新
let timer = null
onMounted(async () => {
  await getDepartmentListData()
  timer = setTimeout(() => {
    getScreenMemberInfoData()
  }, 1000)
})

onBeforeUnmount(() => {
  timer = null
})
</script>

<template>
  <div class="indexPage">
    <div class="container">
      <!-- 左 -->
      <div class="left">
        <memberList :memberList="screenMemberInfo"></memberList>
      </div>
      <!-- 中 -->
      <div class="middle">
        <div class="title">
          <div class="title-text">绿科再生资源回收数字化平台</div>
        </div>
      </div>
      <!-- 右 -->
      <div class="right"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.indexPage {
  > .container {
    height: 100vh;
    padding: 20px 10px 10px;
    display: flex;
    justify-content: space-between;
    background-color: black;

    > .left,
    > .middle,
    > .right {
      border: 1px solid red;
    }
    > .left {
      min-width: 550px;
    }
    > .middle {
      min-width: 770px;
      .title {
        padding: 0 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        > .title-text {
          padding: 0 10px;
          border: 1px solid #3c5b6f;
          font-size: 46px;
          background-image: linear-gradient(to right, #f1f8f3, #17b1c2);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
      }
    }
    > .right {
      min-width: 550px;
    }
  }
}
</style>
